<template>
  <div>
    <h2>HOME</h2>
    <!-- 导航区 通过设置to属性设置跳转链接  -->
    <router-link :to="{ name: 'music' }">音乐</router-link><br />
    <!-- <router-link :to="{ name: 'music',params:{id:1,time:'3'} }">音乐-params传参-华语1</router-link><br />
    <router-link :to="{ name: 'music',params:{id:2,time:'2'} }">音乐-params传参-华语2</router-link><br />
    <router-link :to="{ name: 'music',params:{id:3,time:'1'} }">音乐-params传参-华语3</router-link><br /> -->
    <router-link :to="{ name: 'music', query: { id: 1, time: '3' } }"
      >音乐-query-华语1</router-link
    ><br />
    <router-link :to="{ name: 'music', query: { id: 2, time: '2' } }"
      >音乐-query-华语2</router-link
    ><br />
    <router-link :to="{ name: 'music', query: { id: 3, time: '1' } }"
      >音乐-query-华语3</router-link
    ><br />
    <router-link :to="{ name: 'music', query: { name: 'last regrets' } }"
      >音乐-props-华语4</router-link
    ><br />
    <router-link :to="{ name: 'music', query: { name: '鸟之诗' } }"
      >音乐-props-华语5</router-link
    ><br />
    <router-link :to="{ name: 'news' }">新闻</router-link><br />
    <router-link
      :to="{
        name: 'games',
        query: { club: '八月社', size: '2GB' },
        params: { favorite: '我永远喜欢出云', gal: '青空下的加缪' },
      }"
      >游戏</router-link
    >
    <!-- <router-link to="/home/music" >音乐</router-link><br> -->
    <!-- <router-link :to="{path:'/home/music'}" >音乐</router-link><br> -->
    <button @click="forward">前进</button>
    <button @click="back">后退</button>
    <!-- 展示区 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    forward() {
      this.$router.forward();
    },
    back() {
      this.$router.back();
    },
    go() {
      this.$router.go(2);
    },
  },
};
</script>

<style>
</style>